Now let's capture this event on the other side, on the client side, and open up our guy.
So I'm going to go to my my zombie game, the main game, the workspace.
I'm going to go down to starter g UI.
You might have to scroll a little bit, screen g UI, hit the plus, add a frame.
The frame I'm going to call shop, frame shop.
From here we go and Anchor point.
I want to center this when I open it.
So I'm going to do this at 0.5 and point five.
So my anchor point, you can see that moved up a little bit because the anchor point is in the center
of the component, the frame, and I'll go to position where the position we want to center it.
So I'm going to do 0.5 on the x comma, zero pixel offset comma 0.5 and the Y comma, zero pixel offset.
Notice I didn't have to put the little curly brackets in there for that to work.
I'm going to hit the enter boom.
We're in the center.
All right.
Now I can change my size without changing my position because the anchor point is in the center and
the size will increase based on where the anchor point is.
If the anchor point was up here on the top or anywhere else other than the center, if I change my my
size and I have to change my position to recenter it, just something a little helpful to know.
All right.
So size I'll make that maybe point I'll do point four on the x zero pixel offset and 0.5 on the Y zero
pixel offset.
How does that look?
That's pretty good.
I like that.
Now, let's try and put a script on that so we can capture the event and open this up.
I'm going to keep this visible for now.
I could make it invisible by hitting this check, but I'm just going to do it with code so that I can
keep working on it and not have to check and uncheck it.
Hit the plus right here on the shop frame.
Add a local script.
Right, Because we're on the client side and let's see, what should we call this?
How about shop script?
I think I might put everything in this script like no code on buttons and stuff.
Just have the main shop script work for everything.
I need a variable for my shot, my frame.
So I'll just call that shop frame and that's going to equal script parent.
I'm going to need replicated storage, local whoops, local R's game, get service, replicated storage
and I need my shop re my remote event and that is in replicated storage.
Wait for child shop r e.
All right now the shop r e is going to come over from the server side.
It's going to be a client event.
So I'm going to say shop r e dot on client event colon connect function.
We don't need any arguments here and we'll do a shop frame dot.
Visible will equal.
True.
Now remember, it is visible now.
So what I'm going to do is I'll just copy this right here and then right after I initialize my shop
frame, I'll just make that visible equals the false right now.
It'll turn it off if I forget.
And then I don't have to replay my game.
Let's see, We should not see a shop frame.
We should click this little bell wallah, although we can't close this yet.
So let's do that now and then we'll make the little ding sound.
Two.
I turn my game off and I selected the shop frame.
If yours is not visible, just select frame and then go down fine.
Visible.
Check it so you can turn it on and off because you might want to work on other stuff.
All right, so on the shop frame, let's add a bar across the top with a little X on the corner.
That's a typical way of closing window.
We'll go to shop, frame, hit the plus F for frame.
There we go.
This is going to be a frame to the top bar.
I call this top bar FRM and maybe we'll make it a different color so we could see it while we're working
on it.
Maybe purple.
Cool.
And I wanted to stretch across the top.
So we'll go on down.
Position is good.
Let's do size.
So size, I'm going to scale one on the X.
So that's all the way across zero pixel offset and comma 0.1 on the Y zero pixel offset.
So we'll make it 10% the size of the window.
All right.
Now let's get a little a little button here that we can press.
So on the top frame on the top bar frame, hit the plus.
Text button and let's call this close button.
All right, Now I want to make my anchor point right here so I can anchor it right here.
And that way the button is going to be inside my frame.
So all my close button frame.
Let's see you go to the anchor point.
Where is that?
It's up higher.
I'm going to make that one.
So that's all the way on the left and then 0.5 and the Y.
So that's the anchor point.
And now we have to move the anchor point to here.
We'll go to position.
Here we go.
We'll make that one.
So all the way to the left.
Zero pixel offset, 0.5 and the Y.
Zero pixel offset.
There we go.
Now, for size, I want it to be square, so I'm going to come down to size.
My y is going to be the one that the Y height is going to be the one that I worry about the most.
Let me open my size.
And then on y, I'm going to do one and zero and I'm not going to try and get the scaling so that it's
square.
Because if people change the size of the window that didn't go, I want it to still remain square.
So I'm going to hit this plus sign.
I'm going to do UI, a four aspect ratio constraint.
Then I'm going to click an aspect ratio constraint and then the aspect type.
I'm going to change that to scale with parents size, and that should be pretty good.
Now, when we change the size, we go to the View tab output.
That's still a square.
Let's go and change that output window and we need to change the name of this.
We need to make it an X.
So I'm going to go to my font face.
I'll make that consistent.
The comic one maybe bold it text.
I'm going to make it a capital X.
There we go.
I'm going to scale it and make it bigger.
That's pretty good.
What does that look like?
Yeah, let's make it a darker color.
So go to your text button, scroll to the top, and then move down a little bit till you see background
color three.
We'll make it that same purple, but will make it darker.
I think that looks pretty good.
Let's add the code that will close our window when we press this button.
Now we're going to put everything in the shop script, so I'm going to open that up and then I'll get
a reference to the close button.
Local close button.
It's on the shop frame under the top bar frame, close button, and it's not going to have a lot of
stuff in this function, so I'm just going to make an anonymous function.
I'll do close button dot activated.
So that's the event that fires when you activate it.
It also works on mobile devices, so you should keep that in mind.
So we have our activated, we'll hit connect function and then we're just going to get our shot frame
instead of being visible.
Control C Control V we're going to make it invisible.
We also got to put a little ding there, but let's try this out.
Make sure we don't make any mistakes.
I'll go to my view tab.
Now I hit my output.
And click nice and it's still square.
Even though we have our output window there, our little x is still square.
Cool.
And it closes.
No errors.
Let's go ahead and do our dang.
Now turn this off and then I'll go to my zombie game.
Let me close this.
Open up our tool box.
Where is the tool box?
Home.
Tool box.
I'm going to go to Marketplace Audio and I forget what I searched on for the demo.
I think it was like bell.
Bell sound would have been good.
Taco Bell.
So you can pick whatever you want.
Let me go through a few of these and then I'll unpause the video.
All right.
So I went through a couple of these.
I think elevator bell is going to do it.
Yeah, that's not bad.
I'm going to select my shop frame, hit the insert, and then have it insert right under the shop frame.
If it went somewhere else, you could just drag it to where you want it.
So I'm going to just change it to Dang and I'll close my tool box, go to my shop script.
And that's right here.
If you if you lost it and we'll get a reference to our Belle local dang shop frame.
Dang.
We might want to do a wait for child.
Let's do a wait for child and we'll do dang.
All right.
So when we open and close well, when we open, let's just do it on the open.
So when we open up, we'll do our dang colon play.
All right, let's see what we got.
View output.
Yeah.
And close.
We won't make a noise.
That's pretty good.